﻿<!DOCTYPE html>
<html lang="en">
<head>
    <title id="Description">Minimized NavBar</title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.arctic.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxnavbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../scripts/demos.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#layoutBar").jqxNavBar({height:'auto', selection: false });
            $("#navBar").jqxNavBar({minimizedTitle: "NavBar 1", minimized: true, minimizedHeight: 40, height: 120, orientation: 'vertical', selectedItem: 0 });
            $("#navBar2").jqxNavBar({ minimizedTitle: "NavBar 2", minimized: true, minimizedHeight: 40, height: 120, selectedItem: 0 });
        });
    </script>
</head>
<body>
    <div id="layoutBar">
        <ul>
            <li>Minimized NavBar with Vertical Layout
            <div id="navBar">
                <ul>
                    <li>1</li>
                    <li>2</li>
                    <li>3</li>
                </ul>
            </div>
            </li>
            <li>Minimized NavBar with Horizontal Layout
            <div id="navBar2">
                <ul>
                    <li>1</li>
                    <li>2</li>
                    <li>3</li>
                </ul>
            </div>
            </li>
        </ul>
    </div>
</body>
</html>
